<template>
  <div class="qqChat-css">
    <symbol id="message-tail-filled" viewBox="0 0 11 20">
      <g transform="translate(9 -14)" fill="inherit" fill-rule="evenodd">
        <path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"></path>
      </g>
    </symbol>
    <div class="qqChat-css-main">
      <div class="content">
        <!--左边开始-->
        <div class="bubbles-group" v-for="(item,key) in dataList" :key="key">
          <template v-if="item.type=='left'">
            <div class="bubble hide-name is-in can-have-tail is-group-last"
                 style="--peer-color-rgb: 214,119,34;">
              <div class="bubble-content-wrapper" style="">
                <div class="bubble-content">
                  <div class="message spoilers-container" dir="auto"><span class="translatable-message">{{item.content}}</span><span class="time"><span
                      class="i18n" dir="auto">16:02</span><div class="time-inner" title="12 June 2025, 16:02:35"><span class="i18n" dir="auto">{{ item.time }}</span></div></span><span
                      class="clearfix"></span></div>
                  <svg viewBox="0 0 11 20" width="11" height="20" class="bubble-tail">
                    <use href="#message-tail-filled"></use>
                  </svg>
                </div>
              </div>
            </div>
          </template>
          <template v-if="item.type=='right'">
            <div class="bubble hide-name is-out can-have-tail is-sent is-group-last">
              <div class="bubble-content-wrapper">
                <div class="bubble-content" style="background-color:#e3fee0;">
                  <div class="message spoilers-container" dir="auto">{{ item.content }}<span class="time"><span class="tgico time-sending-status"></span><span class="i18n" dir="auto">09:58</span><div
                      class="time-inner time-inner1" title="12 June 2025, 20:39:05"><span class="tgico time-sending-status"></span><span class="i18n" dir="auto">{{ item.time }}</span></div></span><span
                      class="clearfix"></span></div>
                  <svg viewBox="0 0 11 20" width="11" height="20" class="bubble-tail bubble-tail1" >
                    <use href="#message-tail-filled"></use>
                  </svg>
                </div>
              </div>
            </div>
          </template>

        </div>
        <!--左边结束-->
        <!--右边开始-->
        <div class="bubbles-group">

        </div>
        <!--右边结束-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      dataList:[]

    };
  },
  mounted() {
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
@import url('../../assets/images/qqChat/index-DauxdX1f.css');

.bubble-content {
  background: #ffffff;
}

.qqChat-css {
  &-main {
    background: url("../../assets/images/qqChat/qqliaotian.png") no-repeat;
    background-size: 100% 100%;
    width: 1252px;
    height: 903px;

    .content {
      padding: 50px 340px 50px 280px;
    }
  }
}
</style>
